<template>
  <page-meta :page-style="gshow?'overflow: hidden;' : 'overflow: auto;'"></page-meta>
  <view class="container">
    <uv-swiper :list="storeInfo.slider_image" height="640rpx" indicator indicatorMode="line" circular></uv-swiper>
    <view class="goodsInfo">
      <view class="goodsInfo-tp">
        <view class="fl">
          <view class="line1">
            <text class="txt1">¥{{storeInfo.price}}</text>
            <!-- <text class="txt2">3999.00起</text> -->
          </view>
          <view class="line2">
            {{storeInfo.store_name}}
          </view>
          <view class="line3">
            库存：{{storeInfo.stock}}
          </view>
        </view>
       <view class="fr">
          <div class="reset_button" @click="handleShare">
            <image class="share-icon" src="/static/images/share.png" mode=""></image>
            <view class="share-txt">立即分享</view>
          </div>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="sku" @click="open">
        <view class="sku-label">
          规格
        </view>
        <view class="sku-value">
          {{skuInfo.suk}}
        </view>
        <image class="sku-arrow" src="/static/images/arrow.png" mode=""></image>
      </view>
      <view class="rich">
        <view class="rich-title">
          商品详情
        </view>
        <view class="rich-body">
          <uv-parse :content="storeInfo.description"></uv-parse>
        </view>
      </view>
    </view>
    <view style="width: 100%;height: 152rpx;"></view>
    <view class="footer">
      <view class="footer-fl">
        <view class="footer-item">
          <view style="display: flex;flex-direction: column;align-items: center;position: relative;">
            <uv-badge class="badge" style="position: absolute;right: 0;top: -20rpx;" v-if="totalCount>0" type="error" max="99" :value="totalCount"></uv-badge>
            <image class="footer-item-icon" src="/static/images/buycar.png" mode=""></image>
            <text class="footer-item-label">购物车</text>
          </view>

        </view>
      </view>
      <view class="exchange" style="background: #EA7222;" @click="open">加入购物车</view>
      <view class="exchange" style="margin-left: 10rpx;" @click="open">立即购买</view>
    </view>
    <uv-popup ref="popup" mode="bottom" round="20" :closeable="true">
      <view class="dialog">
        <view class="goodsInfo">
          <image class="goodsPic" :src="skuInfo.image" mode=""></image>
          <view class="block">
            <view class="goodsName text-twoline-ellipsis">
              {{storeInfo.store_name}}
            </view>
            <view class="goodsprice">
              ￥{{skuInfo.price}}
            </view>
            <view class="skuValue">
              <text>规格值：{{skuInfo.suk}}</text>
              <text>库存： {{skuInfo.stock}}</text>
            </view>
          </view>
        </view>
        <view class="sku" v-if="productAttr && productAttr.length>0">
          <view class="sku-title">
            选择规格
          </view>
          <view class="skuList" style="margin-bottom: 20rpx;" v-for="(item, index) in productAttr" :key="index">
            <view class="skuList-title">
              {{item.attr_name}}
            </view>
            <view class="skuList-info">
              <view class="skuList-item" :class="itemChild.check?'active':''"
                v-for="(itemChild, indexChild) in item.attr_value" :key="indexChild"
                @click="setValue(index, indexChild)">
                {{itemChild.attr}}
              </view>
            </view>
          </view>
        </view>
        <view class="buyInfo">
          <view class="buyInfo-label">
            购买数量
          </view>
          <uv-number-box :min="1" :max="10" v-model="params.cartNum" @change="setCountNum"></uv-number-box>
        </view>
        <view class="foot">
          <view class="foot-item" style="background: #EA7222;border-radius: 40rpx 0rpx 0rpx 40rpx;"
            @click="handleAdd(0)">
            加入购物车</view>
          <view class="foot-item" style="background: #EA2222;border-radius: 0rpx 40rpx 40rpx 0rpx;" @click="toBuy(1)">
            立即购买
          </view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        list: [
          'https://cdn.uviewui.com/uview/swiper/swiper3.png',
          'https://cdn.uviewui.com/uview/swiper/swiper2.png',
          'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        ],
        storeInfo: {
          store_name: "水果沙拉",
        },
        skuInfo: {
          price: "200",
          suk: "黑色/100g",
          stock: "10",
          image: "https://cdn.uviewui.com/uview/swiper/2.jpg"
        },
        params: {
          new: null,
          cartNum: 1,
          productId: ""
        },
        productAttr: [{
          attr_name: "种类",
          attr_value: [{
            attr: "白色"
          }]
        }],
        gshow: false,
        totalCount: 0
      }
    },
    async onLoad(option) {
      this.getDetail(option.id);
      this.getcarCount();
    },
    onShareAppMessage(res) {
      if (res.from === 'button') {

      }
      return {
        title: this.storeInfo.store_name,
        path: `/pages/home/goodsDetail?id=${this.params.productId}`,
        imageUrl: this.storeInfo.slider_image
      }
    },
    methods: {
      // 数量
      getcarCount(){
        reqApi.cartCount({numType: true}).then(res=>{
          console.log("购物车数量", res);
          this.totalCount = res.data.count;
        })
      },
      open() {
        this.$refs.popup.open();
      },
      handleShare() {
        uni.shareWithSystem({
          // summary: this.projectInfo.note,
          // imageUrl: this.baseUrl + this.projectInfo.cover_image,
          href: `${this.baseUrl}/index/index/h5#/pages/home/login`,
          success() {
            // 分享完成，请注意此时不一定是成功分享
            console.log("分享成功")
          },
          fail() {
            // 分享失败
            console.log("分享失败")
          }
        })
      },
      getDetail(id) {
        reqApi.goodsDetail({
          id
        }).then(res => {
          console.log("商品详情", res);
          this.storeInfo = res.data.storeInfo;
          this.params.productId = res.data.storeInfo.id;
          if (res.data.productAttr && res.data.productAttr.length > 0) {
            res.data.productAttr.forEach(v => {
              v.attr_value[0].check = true;
            })
            this.productAttr = res.data.productAttr;
            this.productValue = res.data.productValue;
            this.getSku();
          } else {
            this.skuInfo = {
              image: this.storeInfo.image,
              store_name: this.storeInfo.store_name,
              price: this.storeInfo.price,
              suk: "默认",
              stock: this.storeInfo.stock
            }
          }
          console.log("规格", this.productAttr);
        })
      },
      setValue(index1, index2) {
        console.log(index1, index2);
        this.productAttr[index1].attr_value.forEach(v => {
          v.check = false;
        })
        this.productAttr[index1].attr_value[index2].check = true;
        this.getSku();
      },
      getSku() {
        let temp = [];
        this.productAttr.forEach(v => {
          v.attr_value.forEach(q => {
            if (q.check) {
              temp.push(q.attr);
            }
          })
        })
        // console.log("规格值数组", temp);
        let str = temp.join(",");
        // console.log("后端返回的规格集合", this.productValue);
        this.skuInfo = this.productValue[str];
        console.log("选中的规格组合", this.skuInfo);
        this.params.uniqueId = this.skuInfo.unique;
      },
      // 加入购物车
      handleAdd(key) {
        this.params.new = key;
        reqApi.addCart(this.params).then(res => {
          uni.showToast({
            title: "购物车添加成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(()=>{
            this.getcarCount();
          }, 1500)
        })
      },
      toBuy(key) {
        this.params.new = key;
        reqApi.addCart(this.params).then(res => {
          uni.navigateTo({
            url: `/pages/home/goodsBuy?id=${res.data.cartId}&isnew=${this.params.new}`
          })
        })
      },
      setCountNum(e) {
        this.params.cartNum = e.value;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .reset_button {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .skuValue {
    display: flex;
    justify-content: space-between;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
  }

  .active {
    border: 2rpx solid #EA2222 !important;
    color: #EA2222 !important;
  }

  .dialog {
    padding: 40rpx 30rpx;
    box-sizing: border-box;

    .goodsInfo {
      display: flex;

      .goodsPic {
        width: 156rpx;
        height: 156rpx;
        border-radius: 20rpx;
        margin-right: 20rpx;
      }

      .block {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .goodsName {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #333333;
        }

        .goodsprice {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #EA0000;
        }
      }
    }

    .sku {
      padding: 30rpx 0;
      box-sizing: border-box;

      .sku-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #AAAAAA;
        margin-bottom: 20rpx;
      }

      .skuList {
        .skuList-title {
          margin-bottom: 20rpx;
        }

        .skuList-info {
          display: flex;
          flex-wrap: wrap;

          .skuList-item {
            padding: 12rpx 8rpx;
            box-sizing: border-box;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            border: 2rpx solid #EEEEEE;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            margin-right: 30rpx;
            text-align: center;
            margin-bottom: 20rpx;
          }
        }

      }
    }

    .buyInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .buyInfo-label {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
      }
    }

    .foot {
      display: flex;
      margin-top: 40rpx;

      .foot-item {
        flex: 1;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 88rpx;
      }
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    bottom: 0;

    .footer-fl {
      flex: 1;
      display: flex;
      justify-content: center;

      .footer-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 30rpx;

        .footer-item-icon {
          width: 40rpx;
          height: 40rpx;
        }

        .footer-item-label {
          font-weight: 400;
          font-size: 24rpx;
          color: #000000;
        }
      }
    }

    .exchange {
      width: 242rpx;
      height: 80rpx;
      background: #EA2222;
      border-radius: 20rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 80rpx;
    }
  }

  .rich {
    background: #fff;
    margin-top: 16rpx;

    .rich-title {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      text-align: center;
      height: 100rpx;
      line-height: 100rpx;
    }

    .rich-body {
      padding: 30rpx;
      box-sizing: border-box;
    }
  }

  .main {
    margin-top: 16rpx;

    .sku {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 100rpx;
      background: #fff;
      padding: 0 30rpx;
      box-sizing: border-box;

      .sku-label {
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
      }

      .sku-value {
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
        flex: 1;
        padding: 0 30rpx;
        box-sizing: border-box;
      }

      .sku-arrow {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .container {
    .goodsInfo {
      padding: 30rpx;
      box-sizing: border-box;
      background: #fff;

      .goodsInfo-tp {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .fl {
          flex: 1;

          .line1 {
            font-weight: 500;
            color: #F52705;

            .txt1 {
              font-size: 24rpx;
              margin-right: 7rpx;
            }

            .txt2 {
              font-size: 36rpx;
            }
          }

          .line2 {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            margin: 15rpx 0;
          }

          .line3 {
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
          }
        }

        .fr {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;

          .share-txt {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #333333;
          }

          .share-icon {
            width: 48rpx;
            height: 48rpx;
          }
        }
      }

    }
  }
</style>